<template>
  <view>
    <u-cell-group>
      <u-cell :arrow="false">
        <view></view>
        <view slot="title" class="title1">上传附件</view>
        <template slot="right-icon">

          <u-button @click="select" type="primary" size="medium" native-type="button" class="upload-btn">上传文件
          </u-button>

        </template>
      </u-cell>
    </u-cell-group>
    <view class="file">
      <view class="file-item" v-for="(item, index) in fileImage" :key="index">
        <view style="font-weight: normal!important" @click="showFile(item)" class="title">
          附件{{ index + 1 }}、{{ item.oldName }}
        </view>
        <view class="del" @click="delFile(index)">删除</view>
      </view>
    </view>
  </view>
</template>

<script>	
import {
  getToken,
  removeToken,
  removeUserInfo
} from "../common/utils.js";
export default {
  name: "uplodFile",
  data() {
    return {
      fileImage: []
    };
  },
  methods: {
    // 获取上传状态
    select() {
      const token = getToken()
      var _this = this;
      uni.chooseImage({
        quality: 80,
        count: 999999,
        sizeType: ['compressed'],

        success: chooseImageRes => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          _this.fileList = tempFilePaths[0];
          const uploadTask = uni.uploadFile({
            url: 'http://www.haotask.cn:8081/api/SysUpload/UploadFile', //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            header: {
              "Content-Type": "multipart/form-data",
              'accept': 'application/json',
              'Authorization': 'Bearer' + ' ' + token //若有token，此处换上你的token，没有的话省略 
            },
            success: uploadFileRes => {
              uni.showToast({
                title: '上传成功',
                icon: 'none'
              })
              try {
                var front = JSON.parse(uploadFileRes.data).msg;

              } catch (e) {
                //TODO handle the exception
                var front = uploadFileRes.data.msg;
              }
              // this.fileImage = []
              this.fileImage.push({
                oldName: front.oldName,
                url: front.url,
                id: front.id
              })
              this.$emit('changeFile', this.fileImage)

            }
          });
        }
      });

    },
    // 删除
    delFile(i) {
      this.fileImage.splice(i, 1);
      this.$emit('changeFile', this.fileImage)
    },
  }

}
</script>

<style lang="scss">
.file {
  padding: 5px 15px;

  &-item {
    cursor: pointer;
    font-size: 28upx;
    color: #333333;
    display: flex;
    align-items: center;

    .title {
      font-size: 28upx;
      color: #333333;
      text-decoration: underline;
      width: 90%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .del {
      width: 70px;
      font-size: 28upx;
      color: #fa4a55;
      font-weight: bold;
      text-decoration: none;
      text-align: center;
    }
  }
}

.file-item {
  text-decoration: underline;
}
</style>
